<template>
  <div v-if="active === 'property'">
    <HomePropsEditor :name="name" v-model="data" />
    <PopupPropsEditor v-if="data.mode === 'popup'" v-model="popupProps" />
  </div>
  <ComponentEditor v-if="active === 'component'" type="home" v-model:component="data.component" v-model:component-props="data.componentProps" />
  <LayoutEditor v-if="active === 'layout'" v-model="data.layout" />
</template>
<script lang="ts" setup>
  import { active, currentApp, currentMicro } from '@/views/seed-dev'
  import { ComponentEditor } from '../../ComponentEditor';
  import { LayoutEditor } from '../../LayoutEditor';
  import { ref, watch } from 'vue';
  import { save } from '..';
  import { HomeConfiguration } from '@/views/dev-types';
  import { PopupPropsEditor } from '../../PopupPropsEditor';
  import HomePropsEditor from './HomePropsEditor.vue';

  const props = defineProps<{homeName: string}>()

  function getInitData() {
    if(!props.homeName) return {}

    const microName = currentMicro.value
    if(microName) {
      const micro = currentApp.value.micros[microName]
      return micro.homes[props.homeName]
    }

    return currentApp.value.homes[props.homeName]
  }

  const name = ref<string>(props.homeName)
  const data = ref<HomeConfiguration>(getInitData())
  const popupProps = ref(data.value.popupProps || {})

  watch(() => data.value, () => save(name.value, data.value), { deep: true })
  watch(() => popupProps.value, (val) => data.value.popupProps = val, { deep: true })
</script>